<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/customer_dail.css">
    <title>客户案列详情</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" >解决方案</a></li>
                    <li><a href="./customer.html" class="active">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <div class="tag_btn">
        <p class="font_20">联系我们</p>
     </div>
    <main>
        <div class="banner">
            <img src="./img/u422.png" alt="">
             <div class="cout_box">
                <p class="font_30">合作单位名称-智慧交通一体化云平台</p>
                <h3 class="font_33">赋能交通行业新的变革</h3>
                <a class="font_24 font_white" href="#">产品咨询</a>
             </div>
        </div>
        <div class="back">
            <div class="container claerFlex">
                <div class="left_list">
                    <!-- <ul>
                        <li>
                            <h3 class="font_33 font_lighter">案例背景</h3>
                            <p class="font_24 font_black">这是一段案例背景示例：XXX委办局为了响应国家XXX政策，对现有交通状况进行研判，总结出目前XX城市智慧交通行业发展的3大方向</p>
                            <div>
                                <p class="font_24 font_black">1、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                <p class="font_24 font_black">2、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                <p class="font_24 font_black">3、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            </div>
                            <p class="font_24 font_black">我公司XXX产品针对以上痛点提出解决方案，与XXX委办局达成合作。</p>
                        </li>
                        <li>
                            <h3 class="font_33 font_lighter">案例需求</h3>
                            <p class="font_24 font_black">这是一段案例需求示例：</p>
                            <p class="font_24 font_black">本次合作中需要求主要有以下几点：</p>
                            <p class="font_24 font_black">1、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <p class="font_24 font_black">2、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <p class="font_24 font_black">3、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <p class="font_24 font_black">4、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <p class="font_24 font_black">5、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <p class="font_24 font_black">6、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                        </li>
                        <li>
                            <h3 class="font_33 font_lighter">合作产品与解决方案</h3>
                            <p class="font_24 font_black">这是一段合作示例：</p>
                            <p class="font_24 font_black">我司实现从XXXX、XXXXX、XXXXX、XXXXXXXX的全生命周期管理，整个应用和管理不需要运行到第三方平台。打破原有系统之间的的信息孤岛，集成各个业务系统的信息碎片，聚合在一站式的3D场景展示平台上统一展示，为信息联动管控打下强有力的基础。针对现有的问题，系统首先建立XXXXXXXXXXXXXXXX的详细三维模型，再通过可视化方式将各子系统设备模型按原位放在城市的相应位置</p>
                            <p class="font_24 font_black">步骤1、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <img src="./img/u40.png" alt="">
                            <p class="font_24 font_black">步骤2、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <img src="./img/u40.png" alt="">
                            <p class="font_24 font_black">步骤3、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <img src="./img/u40.png" alt="">
                            <p class="font_24 font_black">步骤4、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <img src="./img/u40.png" alt="">
                            <p class="font_24 font_black">步骤5、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            <img src="./img/u40.png" alt="">
                            <p class="font_24 font_black">步骤6、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                        </li>
                        <li>
                            <h3 class="font_33 font_lighter">案例相关成果与里程碑</h3>
                            <p class="font_24 font_black">这是一段案例里程碑示例：</p>
                            <p class="font_24 font_black">2021年X月XX日：项目启动</p>
                            <p class="font_24 font_black">2021年X月XX日：项目完成XXX工作，实现XXX</p>
                            <p class="font_24 font_black">2021年X月XX日：项目完成XXX工作，实现XXX</p>
                            <p class="font_24 font_black">2021年X月XX日：项目完成XXX工作，实现XXX</p>
                            <p class="font_24 font_black">2021年X月XX日：项目结项</p>

                            <div>
                                <p class="font_24 font_black">这是一段案例成果示例：</p>
                                &nbsp;
                                <p class="font_24 font_black">1、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                <p class="font_24 font_black">2、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                <p class="font_24 font_black">3、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                <p class="font_24 font_black">4、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                            </div>
                        </li>
                    </ul> -->
                </div>
                <hr>
                <div class="right_list">
                    <!-- <ul>
                        <li class="list">
                            <h3 class="font_33 font_lighter">合作单位</h3>
                            <div>
                                <img src="./img/bd图_u1014.png" alt="">
                                <p class="font_24">合作单位名称</p>
                            </div>
                            <p class="font_24 font_black">合作单位简介：</p><br>
                            <p class="font_24 font_black">这是一段合作单位简介示例：联想集团作为一家在信息产业内多元化发展的大型企业集团，具有创新性的科技前瞻理念。在2019年《财富》世界500强和福布斯全球数字经济100强评选中，均榜上有名。集团总部基地占地13公顷，地上建筑面积12万平方米</p>
                        </li>
                        <li class="list">
                            <h3 class="font_33 font_lighter">相关新闻</h3>
                            <ul>
                                <li class="new">
                                    <img src="./img/u1170.png" alt="">
                                    <p class="font_20 font_black">这是一段新闻标题示例</p>
                                </li>
                                <li class="new">
                                    <img src="./img/u1170.png" alt="">
                                    <p class="font_20 font_black">这是一段新闻标题示例</p>
                                </li>
                                <li class="new">
                                    <img src="./img/u1170.png" alt="">
                                    <p class="font_20 font_black">这是一段新闻标题示例</p>
                                </li>
                                <li class="new">
                                    <img src="./img/u1170.png" alt="">
                                    <p class="font_20 font_black">这是一段新闻标题示例</p>
                                </li>
                            </ul>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>  
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
    <div id="mask">
        <div class="claerFlex">
            <p class="font_20 font_white">联系我们</p>
            <span id="close">
                <img src="./img/u526.png" alt="">
            </span>
            <div id="count_box" >
                <ul class="count">
                    
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        let data2 = [
        {
            title:'咨询服务',
            msg:[
                {
                    img:'./img/u537.png',
                    title:'产品咨询',
                    src:'./consult.html'
                },
                {
                    img:'./img/u540.png',
                    title:'售前客服咨询',
                    src:'./service.html'
                },
            ]
        },
        {
            title:'联系方式',
            msg:[
                {
                    img:'./img/u548.png',
                    text:'XXX-XXXXXXXXX'
                },
                {
                    img:'./img/u550.png',
                    text:'XXXXXX@XXX.com',
                }
            ]
        }
    ];
    get({
        type:'GET',
        url:'/v1/customer/dail',
        success:function(res){
            if(res.code === 200){
                console.log(res)
                creaotr(res.data)
            }
        }
    })
    let tag_bnt = document.querySelector('.tag_btn');
    let mask = document.querySelector('#mask');
    let close_btn = document.querySelector('#mask #close');
    let count = document.querySelector('#mask #count_box');
    let ul_box = count.firstElementChild;
    function creaotr(data){
        let left = document.querySelector('.left_list');
        let right = document.querySelector('.right_list');
        left.innerHTML = data[0].count;
        right.innerHTML = data[1].count;
    }
    data2.forEach((v,i)=>{
        let {title,msg} = v;
        if(i+1 === data2.length){
            console.log(i)
            ul_box.innerHTML +=`
            <li>
                        <p class="font_20 font_bold">${title}</p>
                    </li>
            `
            msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
            <div>
                            <img src="${item.img}" alt="">
                            <p class="font_17">${item.text}</p>
                        </div>
        `
        })
        }else{
            ul_box.innerHTML += `
        <li>
                        <p class="font_20 font_bold">${title}</p>
                        
                    </li>
        `
        msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
        <a ${item.src?"href="+item.src :''}>
                            <img src="${item.img}" alt="">
                            <p class="font_20">${item.title}</p>
                        </a>
        `
        })
        }
    })
    tag_bnt.addEventListener('click',()=>{
        mask.style.display = 'block';
    })
    close_btn.addEventListener('click',()=>{
        mask.style.display = 'none';
        count.style.display = 'block';
      
    })
    }
</script>
</html>